<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="竞企定价策略分析"
        data-page-identification="z_c06tfrygrs"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_alrw8ri7qx 面包屑_826y6allnc -->
            <a-breadcrumb class="vid_alrw8ri7qx" style="word-break: break-word">
                <a-breadcrumb-item
                    v-for="(item, index) in vid_alrw8ri7qx_props_tabConfig"
                    :key="index"
                    @click="handleBreadcrumbJump(router, item)"
                    href=""
                >
                    <template v-if="vid_alrw8ri7qx_props.rt_showIcon">
                        <span v-if="/^(https?:|mailto:|tel:|data:image)/.test(item.icon)" role="img" class="anticon"
                            ><embed style="width: 1em; height: 1em" :src="item.icon"
                        /></span>
                        <component v-else :is="item.icon" />
                    </template>
                    {{ item.title }}
                </a-breadcrumb-item>
            </a-breadcrumb>
            <!-- end vid_alrw8ri7qx 面包屑_826y6allnc -->
            <!-- begin vid_x5evdsd5xf 自定义模板_x6epeaj6d6 -->
            <div class="body">
                <a-spin :spinning="state.spinng" tip="加载中">
                    <div class="content">
                        <div class="top-main">
                            <a-row :gutter="24">
                                <a-col :span="5">
                                    <a-form-item label="省份">
                                        <a-select
                                            show-search
                                            :options="state.provinceList"
                                            :field-names="{ label: 'name', value: 'id' }"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            v-model:value="state.proviceId"
                                            placeholder="请选择省份"
                                            @change="getData(true)"
                                            @focus="getProvinceList(false)"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="5">
                                    <a-form-item label="地级市" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                        <a-select
                                            allow-clear
                                            v-model:value="state.cityName"
                                            placeholder="请选择地级市"
                                            :options="state.regionList"
                                            :field-names="{ label: 'name', value: 'id' }"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            @focus="getRegionList"
                                            @change="getData(false)"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="5">
                                    <a-form-item>
                                        <a-radio-group
                                            size="middle"
                                            v-model:value="state.selectedType"
                                            @change="getData(false)"
                                        >
                                            <a-radio-button
                                                v-for="type in state.productTypes"
                                                :key="type"
                                                :value="type"
                                                >{{ type }}</a-radio-button
                                            >
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="top-chart">
                                <div class="top-left">
                                    <div class="content-title">
                                        <div class="tip">
                                            <div class="tip-msg">{{ state.selectedType }}当前到位价格差与市占率分析</div>
                                        </div>
                                    </div>
                                    <div ref="chartContainer" class="chart"></div>
                                </div>

                                <div class="top-right">
                                    <div class="content-title">
                                        <div class="tip-msg-new"
                                            >内部企业到位价(元/吨)：<span class="weight-font"
                                                >￥{{ state.inPlacePrice }}</span
                                            ></div
                                        >
                                        <div class="tip-msg-new">
                                            内部企业市占率：<span class="weight-font">{{ state.share }}%</span>
                                        </div>
                                    </div>
                                    <div class="default-table" style="padding: 20px; padding-top: 0; height: 300px">
                                        <a-table
                                            :pagination="false"
                                            :columns="columns"
                                            :data-source="state.tableData"
                                            bordered
                                            :scroll="{ y: 200 }"
                                        >
                                            <template #bodyCell="{ column, record, text, index }">
                                                <template v-if="column.dataIndex === 'inPlacePrice'">
                                                    <div v-if="text == 0">--</div>
                                                    <div v-else> ￥{{ text }}</div>
                                                </template>
                                                <template v-if="column.dataIndex === 'share'">
                                                    <div v-if="text == 0">--</div>
                                                    <div v-else> {{ text }}</div>
                                                </template>
                                                <template
                                                    v-if="
                                                        column.dataIndex === 'shareDifference' ||
                                                        column.dataIndex === 'inPlacePriceDifference'
                                                    "
                                                >
                                                    <div v-if="Number(text) > 0"
                                                        >+{{ text }}
                                                        <span style="color: red"> <arrow-up-outlined /></span
                                                    ></div>
                                                    <div v-else-if="Number(text) < 0"
                                                        >{{ text
                                                        }}<span style="color: green">
                                                            <arrow-up-outlined
                                                                style="transform: rotate(180deg)" /></span
                                                    ></div>
                                                    <div v-else-if="Number(text) == 0">--</div>
                                                </template>
                                            </template>
                                        </a-table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bottom-main">
                            <a-row style="margin-top: 24px">
                                <a-col :span="5">
                                    <a-form-item label="日期范围" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                        <a-range-picker
                                            :allowClear="false"
                                            style="width: 100%"
                                            v-model:value="state.date"
                                            valueFormat="YYYY-MM-DD"
                                            :disabledDate="disabledDate"
                                            @change="getBottomData"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="top-chart">
                                <div class="left">
                                    <div class="content-title">
                                        <div class="tip">
                                            <div class="tip-msg">{{ state.selectedType }}历史到位价格分析</div>
                                        </div>
                                    </div>
                                    <div ref="bottomLeft" class="chart"></div>
                                </div>
                                <div class="right">
                                    <div class="content-title">
                                        <div class="tip">
                                            <div class="tip-msg">区域内历史价位高于均价的占比</div>
                                        </div>
                                    </div>
                                    <div ref="bottomRight" class="chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-spin>
            </div>
            <!-- end vid_x5evdsd5xf 自定义模板_x6epeaj6d6 -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    const vid_alrw8ri7qx_props = reactive({
        rt_showIcon: false
    })

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */
    const vid_alrw8ri7qx_props_tabConfig = computed(() => {
        const initValue = [
            {
                'key': 'tab1',
                'title': '数据分析',
                'targetPage': { 'settingType': '', 'url': '', 'customUrl': '' },
                'icon': '',
                'parameter': [],
                'applicationId': 3000000036,
                'query': {}
            },
            {
                'key': 'tab2',
                'title': '竞企定价策略分析',
                'icon': '',
                'targetPage': { 'settingType': '', 'url': '', 'customUrl': '' },
                'parameter': [],
                'applicationId': 3000000036,
                'query': {}
            }
        ]
        return initValue
    })
    /*** PUBLISH_EXEGESIS ***
 systemStore.addBreadcrumbInfo(vid_alrw8ri7qx_props_tabConfig.value);
 *** PUBLISH_EXEGESIS ***/
    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    // 定制化逻辑
    import { nextTick } from 'vue'
    import * as echarts from 'echarts'
    const state = reactive({
        selectedType: 'P·O42.5散',
        dataSource: [],
        regionList: [],
        date: [],
        proviceList: [],
        provinceList: [],
        proviceId: undefined,
        cityName: undefined,
        productTypes: ['P·O42.5散', 'P·C42.5散', 'M32.5袋'],
        urlRegionId: undefined,
        urlProviceId: undefined,
        spinng: false,
        oneData: [],
        oneFinallyData: [],
        twoData: [],
        threeData: [],
        fourData: [],
        tableData: [],
        inPlacePrice: 0,
        share: 0
    })
    // 获取省份
    function getProvinceList(flag) {
        get(`/dynamic-price/api/v1/compete_price_and_market_share/province`).then(data => {
            if (data.status !== 'success') {
                message.error(data.errorMsg)
                return
            }
            state.provinceList = data.data
            if (flag) {
                // state.proviceId = state.provinceList[0].id
                let proviceName = state.provinceList.find(item => item.name == '吉林省')
                state.proviceId = proviceName.id
            }
            if (flag) {
                getData(false)
            }
        })
    }
    function getRegionList() {
        get(`/dynamic-price/api/v1/region_info/city/${state.proviceId}`).then(data => {
            if (data.status !== 'success') {
                message.error(data.errorMsg)
                return
            }
            state.regionList = data.data
        })
    }
    function getData(flag) {
        state.oneData = []
        if (flag) {
            state.cityName = undefined
        }
        state.spinng = true
        const params = {
            'provinceId': state.proviceId,
            'provinceName': '',
            'cityId': state.cityName,
            'cityName': '',
            cementAndPackType: state.selectedType
        }
        let pName = state.provinceList.find(item => item.id === state.proviceId)
        let cName = state.regionList.find(item => item.id === state.cityName)
        if (pName) {
            params.provinceName = pName.name
        }
        if (cName) {
            params.cityName = cName.name
        }
        post('/dynamic-price/api/v1/compete_price_and_market_share/analysis', params)
            .then(data => {
                if (data.status !== 'success') {
                    message.error(data.errorMsg)
                    return
                }
                state.oneData = data.data.competePriceAndMarketShareDetailList.map(item => {
                    return {
                        name: item.name,
                        value: [item.inPlacePriceDifference, item.share, item.share]
                    }
                })
                state.tableData = data.data.competePriceAndMarketShareDetailTableList
                state.inPlacePrice = data.data.inPlacePrice
                state.share = data.data.share
                renderChart1()

                getBottomData()
            })
            .finally(() => {
                state.spinng = false
            })
    }
    function getBottomData() {
        state.threeData = []
        state.fourData = []
        state.spinng = true
        const params = {
            'provinceId': state.proviceId,
            'provinceName': '',
            'cityId': state.cityName,
            'cityName': '',
            cementAndPackType: state.selectedType,
            'startTime': state.date[0],
            'endTime': state.date[1]
        }
        let pName = state.provinceList.find(item => item.id === state.proviceId)
        let cName = state.regionList.find(item => item.id === state.cityName)
        if (pName) {
            params.provinceName = pName.name
        }
        if (cName) {
            params.cityName = cName.name
        }

        post('/dynamic-price/api/v1/history_price/analysis', params)
            .then(data => {
                if (data.status !== 'success') {
                    message.error(data.errorMsg)
                    return
                }
                state.threeData = data.data.historyPriceLineList
                state.fourData = data.data.historyPriceHighRatioList

                renderChart2()

                renderChart3()
            })
            .finally(() => {
                state.spinng = false
            })
    }

    const chartContainer = ref(null)
    const bottomLeft = ref(null)
    const bottomRight = ref(null)
    let myChart = null
    let myChart3 = null
    let myChart4 = null
    // 预设的 8 种颜色
    const colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4']
    // 动态数据
    const disabledDate = current => {
        const start = dayjs(state.date[0])
        const maxEnd = start.add(6, 'month')
        return current && (current.isBefore(start) || current.isAfter(maxEnd))
    }

    const columns = [
        {
            title: '企业名称',
            dataIndex: 'name',
            align: 'center'
        },
        {
            title: '到位价(元/吨)',
            dataIndex: 'inPlacePrice',
            align: 'center',
            sorter: (a, b) => a.inPlacePrice - b.inPlacePrice, // 使用 dayjs 进行时间比较
            sortDirections: ['ascend', 'descend'] // 可选配置排序方向
        },
        {
            title: '价格差(元)',
            dataIndex: 'inPlacePriceDifference',
            align: 'center',
            sorter: (a, b) => a.inPlacePriceDifference - b.inPlacePriceDifference, // 使用 dayjs 进行时间比较
            sortDirections: ['ascend', 'descend'] // 可选配置排序方向
        },
        {
            title: '市占率(%)',
            dataIndex: 'share',
            align: 'center',
            sorter: (a, b) => a.share - b.share, // 使用 dayjs 进行时间比较
            sortDirections: ['ascend', 'descend'] // 可选配置排序方向
        },
        {
            title: '市占率排名',
            dataIndex: 'index',
            align: 'center'
        }
    ]
    // 横向主柱图
    const getBarOption = data => {
        // 定义颜色数组
        const colors = ['#5470C6', '#91CC75', '#EE6666', '#FAC858']

        // 生成 series 数组
        const series = [
            {
                type: 'bar',
                data: data.map(item => item.ratio), // 每个产品的 value
                itemStyle: {
                    color: params => {
                        return colors[params.dataIndex % colors.length] // 为每个柱子分配颜色
                    }
                },
                barWidth: '15px' // 调整柱子的宽度
            }
        ]

        return {
            xAxis: {
                type: 'value',
                name: '占比(%)',
                axisLabel: {
                    formatter: '{value}' // 根据需要设置格式
                }
            },
            yAxis: {
                type: 'category',
                name: '企业名称',
                data: data.map(item => item.name), // 使用产品名称作为 y 轴标签
                axisLabel: {
                    rotate: 25,
                    // margin: 10, // 设置刻度间距
                    formatter: value => {
                        // 如果字符长度大于6，则进行换行
                        return value.length > 8 ? value.match(/.{1,6}/g).join('\n') : value
                    }
                },
                inverse: true,
                nameLocation: 'start'
            },
            // inverse: true, // 反转 Y 轴顺序
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow' // 显示阴影指示器
                }
            },
            grid: {
                left: '20%',
                right: '15%',
                top: '5%'
            },
            series: series
        }
    }
    // 函数：根据动态数据生成 x 轴和 series 数据
    const getOptionFromData = data => {
        const seriesMap = {}
        const xAxisData = [...new Set(data.map(item => item.date))].sort() // 提取唯一的日期并排序

        data.forEach(item => {
            if (!seriesMap[item.name]) {
                seriesMap[item.name] = {
                    name: item.name,
                    type: 'line',
                    data: new Array(xAxisData.length).fill(null), // 初始化为 null 的数组
                    itemStyle: {
                        color: colors[Object.keys(seriesMap).length % colors.length]
                    }
                }
            }
            const monthIndex = xAxisData.indexOf(item.date) // 找到日期索引
            seriesMap[item.name].data[monthIndex] = item.price // 填充价格数据
        })

        const series = Object.values(seriesMap) // 转换为数组

        // 修改平均值的样式
        series.forEach(item => {
            if (item.name === '平均值') {
                item.itemStyle.color = '#808080'
                item.lineStyle = { type: 'dashed' } // 修改线条样式
            }
        })

        const allValues = series.flatMap(product => product.data)
        // 获取全局最大值和最小值
        const globalMax = Math.max(...allValues)
        const globalMin = Math.min(...allValues)

        return {
            xAxis: {
                type: 'category',
                data: xAxisData, // x 轴数据
                axisLine: { onZero: true },
                splitLine: { show: false },
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                    rotate: 25 // 旋转45度
                }
            },
            yAxis: {
                name: '元/吨',
                nameTextStyle: {
                    color: '#aaa',
                    nameLocation: 'start'
                },
                type: 'value',
                min: globalMin * 0.9 // 设置y轴最小值
            },
            series: series, // 确保这里使用 series
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                icon: 'rect',
                data: series.map(item => item.name), // 使用名称作为图例数据
                itemWidth: 20,
                itemHeight: 10,
                itemGap: 30,
                type: 'scroll',
                orient: 'horizontal',
                pageButtonPosition: 'end'
            }
        }
    }

    // 散点图
    // 生成散点图配置
    const getScatterOption = (products, title) => {
        // 动态生成每个产品的 series
        const series = products.map((product, index) => {
            return {
                name: product.name, // 图例项与产品名称一致
                type: 'scatter',
                data: [product.value], // 产品的坐标和大小
                itemStyle: {
                    color: colors[index % colors.length] // 循环为每个系列分配颜色
                },
                // symbolSize: product.value[1] * 2 ,// 调整乘数以控制大小
                symbolSize: 25, // 调整乘数以控制大小
                label: {
                    show: true,
                    formatter: `${product.value[1]}%`,
                    position: 'inside', // 标签位置设为内部
                    color: '#ffffff', // 标签颜色设为白色
                    fontSize: 12 // 可根据需要调整字体大小
                }
            }
        })

        return {
            legend: {
                icon: 'rect',
                data: products.map(p => p.name), // 动态生成图例数据
                type: 'scroll', // 允许横向滚动
                orient: 'horizontal', // 水平排列
                pageButtonPosition: 'end', // 按钮位置
                itemWidth: 20, // 设置宽度
                itemHeight: 10, // 设置高度
                itemGap: 30 // 设置间距
            },
            xAxis: {
                type: 'value',
                name: '到位价差(元/吨)'
            },
            grid: {
                right: '15%'
            },
            yAxis: {
                type: 'value',
                name: '市场占有率%'
                // scale: true,
                // // min: function (value) {
                // //     return value.min - 20
                // // }
                // min:minYValue
            },
            tooltip: {
                trigger: 'item',
                formatter: params =>
                    ` ${params.seriesName}<br/>到位价差: ${params.value[0]}, 市占率: ${params.value[1]}`
            },
            series: series // 动态生成的多个系列
        }
    }

    // 渲染图表函数
    const renderChart1 = () => {
        if (state.oneData.length > 0) {
            echarts.dispose(chartContainer.value)
            myChart = echarts.init(chartContainer.value)
            const option = getScatterOption(state.oneData)
            option && myChart.setOption(option)
        } else {
            echarts.dispose(chartContainer.value)
        }
    }
    const renderChart2 = () => {
        if (state.threeData.length > 0) {
            echarts.dispose(bottomLeft.value)
            myChart3 = echarts.init(bottomLeft.value)
            const option3 = getOptionFromData(state.threeData)
            option3 && myChart3.setOption(option3)
        } else {
            echarts.dispose(bottomLeft.value)
        }
    }
    const renderChart3 = () => {
        if (state.fourData.length > 0) {
            echarts.dispose(bottomRight.value)
            myChart4 = echarts.init(bottomRight.value)
            const option4 = getBarOption(state.fourData)
            option4 && myChart4.setOption(option4)
        } else {
            echarts.dispose(bottomRight.value)
        }
    }

    onMounted(async () => {
        state.date = [dayjs().subtract(6, 'month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
        getProvinceList(true)
        await nextTick()

        // 初始化 ECharts 实例
        myChart = echarts.init(chartContainer.value)
        myChart3 = echarts.init(bottomLeft.value)
        myChart4 = echarts.init(bottomRight.value)

        // 监听窗口尺寸变化
        window.addEventListener('resize', handleResize)
    })

    const handleResize = () => {
        if (myChart) {
            myChart.resize()
        }
        if (myChart3) {
            myChart.resize()
        }
        if (myChart4) {
            myChart.resize()
        }
    }

    // 组件卸载时移除 resize 监听器
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize)
    })
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    .vid_alrw8ri7qx :deep(a) {
        color: undefined;
    }
    :deep(.vid_alrw8ri7qx.@{ant-prefix}-breadcrumb) > span:last-child a {
        color: undefined;
        opacity: 0.75;
    }
    .vid_alrw8ri7qx {
        height: 40px;
        display: flex;
        align-items: center;
        flex-wrap: undefined;
        margin-bottom: 24px;
        padding-right: 24px;
        padding-left: 24px;
        background-color: #ffffff;
    }

    .body {
        padding: 0 24px;
    }
    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .top-search {
        height: 68px;
        background-color: #fff;
        padding: 16px 24px;
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .content {
        background-color: #fff;
        border-radius: 4px;
        padding: 24px;
        padding-top: 24px;
        height: calc(100vh - 100px);
        overflow: auto;
        padding-bottom: 8px;
    }
    .top-chart {
        display: flex;
        gap: 20px;
    }
    .left,
    .top-left {
        width: 65%;
        height: 100%;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
    .top-left {
        width: 50%;
    }
    .right,
    .top-right {
        flex: 1;
        height: 100%;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
    /*表格按钮通用样式*/
    .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f5f5f5;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #262626;
        padding: 8px 8px;
    }
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 6px 16px;
        word-break: break-all;
    }
    /*表格按钮通用样式*/
    .content-title {
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 10%;
    }
    .text-title {
        height: 40px;
        padding: 10px 20px;
        justify-content: start;
        line-height: 40px;
        gap: 10%;
    }
    .tip {
        height: 40px;
        display: flex;
        line-height: 20px;
        align-items: center;
    }
    .tip-msg {
        height: 20px;
        font-size: 16px;
        line-height: 20px;
        //padding-left: 8px;
        font-weight: 600;
    }
    .tip-msg-new {
        height: 40px;
        font-size: 16px;
        line-height: 30px;
        font-weight: 600;
    }
    .weight-font {
        font-size: 24px;
        color: #d7000f;
    }
    /*表格顶部的标题*/
    .chart {
        height: 300px;
    }
    .top-title {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    .title-item {
        display: flex;
        width: 300px;
        height: 80px;
        padding: 16px;
        align-items: center;
        gap: 20px;
    }
    .title-font {
        font-size: 24px;
    }
    .content-font {
        font-size: 24px;
        font-weight: 800;
    }
    .content {
        display: flex;
        flex-direction: column;
    }
    .top-main,
    .bottom-main {
        flex: 1;
    }
</style>
